<template>
    <view class="img-cell">
        <view class="">
            <view class="add-img" @tap="chooseImage">
                <uni-icons type="camera" size="80"></uni-icons>
                <text>添加图片</text>
            </view>
        </view>
        <view class="img-item" v-for="(image, index) in imageList" :key="index">
            <image class="img" :src="easyGetImgUrl(image)" :data-src="easyGetImgUrl(image)" @tap="previewImage">
            </image>
            <view @click="del(index)">
                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
import { uploadImage } from "@/service/api/file.js"
export default {
    props: {
        imageList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        //选择图片
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
            this.$emit("del", this.imageList)
        },
        //上传图片
        upLoadPicFn(files) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    this.imageList.push(e.Data.FullPath)
                    this.$emit("chooseImage", this.imageList)
                }
            })
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
    },
}
</script>

<style lang="scss"></style>
